<template>
  <div class="add_address">
    <div class="header">
      <div class="header-left" @click="goBack">
        <i class="iconfont icon-mjiantou-copy"></i>
      </div>
      <div class="header-in">选择地址</div>
      <div class="header-rigth"></div>
    </div>
    <div class="address">
      <div class="address-box" v-for="(item,idx) in data1" :key="idx">
        <label for>{{item.title}}</label>
        <input v-model="item.model" :placeholder="item.placeholder" maxlength="11">
      </div>
      <div class="address-box">
        <mt-cell title="选择地区:" :value="areaString" is-link @click.native="handlerArea"></mt-cell>
      </div>
      <div class="address-box" v-for="(item,idx) in data2" :key="idx">
        <label for>{{item.title}}</label>
        <input type="text" v-model="item.model" :placeholder="item.placeholder">
      </div>
      <div class="address-box flex-display flex-center-align">
        <span style="margin-left:22px">设为默认地址</span>
        <div
          class="flex-num-one flex-display flex-center-align flex-right-pack"
          style="padding-top:18px"
        >
          <mt-switch v-model="isdefault" @change="turn"></mt-switch>
        </div>
      </div>
    </div>
    <mt-button type="primary" size="small" class="footer theme-background" @click="btn">保存地址</mt-button>

    <!-- <div class="footer">	
          <a @click="btn">保存地址</a>
    </div>-->
    <mt-popup v-model="areaVisible" class="area-class" position="bottom">
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import { Toast, Switch, Button } from "mint-ui";

function setlocalStorage(storeName, storeData) {
  var storeStr = JSON.stringify(storeData);
  var storeArr = window.localStorage.setItem(storeName, storeStr);
  return storeArr;
}
function getlocalStorage(storeName) {
  var storeName = localStorage.getItem(storeName);
  var storeArr = JSON.parse(storeName);
  return storeArr;
}

var data;
if (getlocalStorage("pca-code")) {
  data = getlocalStorage("pca-code");
} else {
  var pcacode = require("../../static/pca-code.json");
  //setlocalStorage('pca-code', pcacode);
  data = pcacode;
}

let index = 0;
let index2 = 0;
let index3 = 0;
// 初始化省
let province = data.map(res => {
  return res.name;
});
// 初始化市
let city = data[index].children.map(res => {
  return res.name;
});
// 初始化区
let area = data[index].children[index2].children.map(res => {
  return res.name;
});

export default {
  name: "add_address",
  data() {
    return {
      name: "",
      phone: "",
      address: "",
      zipcode: "",
      isdefault: false,
      areaVisible: false,
      streetVisible: false,
      areaString: "请选择",
      slots: [
        {
          flex: 1,
          values: province,
          className: "slot1",
          textAlign: "left"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: city,
          className: "slot3",
          textAlign: "left"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: area,
          className: "slot5",
          textAlign: "left"
        }
      ],
      editAddress: this.getlocalStorage("editAddress"),
      editState: true,
      data1: [
        {
          title: "收货人：",
          model: "",
          placeholder: "收货人姓名"
        },
        {
          title: "手机号码：",
          model: "",
          placeholder: "收货人的手机号码"
        }
      ],
      data2: [
        {
          title: "详细地址：",
          model: "",
          placeholder: "详细街道地址"
        }
      ],
      allmsg: "",
      address: ""
    };
  },
  components: {
    ComHeader,
    Switch,
    Button
  },
  created() {
    console.log(this.$router);
    console.log(888);
    this.print(this.editAddress);

    if (this.editAddress) {
      this.data1[0].model = this.editAddress.name;
      this.data1[1].model = this.editAddress.phone;
      this.data2[0].model = this.editAddress.address;
      this.name = this.editAddress.name;
      this.phone = this.editAddress.phone;
      this.address = this.editAddress.address;
      this.zipcode = this.editAddress.zipcode;
      this.areaString =
        this.editAddress.province +
        "," +
        this.editAddress.city +
        "," +
        this.editAddress.quxian;
      if (this.editAddress.isdefault == "0") {
        this.isdefault = false;
      } else {
        this.isdefault = true;
      }
    }
    this.allmsg = JSON.parse(window.localStorage.getItem("allmsg"));
    // window.localStorage.removeItem('allmsg');
    console.log("allmsg", this.allmsg);
    if (this.allmsg) {
      this.data1[0].model = this.allmsg.deliver_name;
      this.data1[1].model = this.allmsg.phone;
      this.data2[0].model = this.allmsg.address;
      console.log(
        "888",
        this.allmsg.province,
        this.allmsg.city,
        this.allmsg.quxian
      );
      var that = this;
      setTimeout(() => {
        if (that.allmsg) {
          that.areaString =
            that.allmsg.province +
            "," +
            that.allmsg.city +
            "," +
            that.allmsg.quxian;
        }
      });
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
      setTimeout(() => {
        window.localStorage.setItem("change", false);
      }, 500);
    },
    btn() {
      if (
        this.data1[0].model == "" ||
        this.data1[1].model == "" ||
        this.data2[0].model == "" ||
        this.areaString == ""
      ) {
        Toast({
          message: "信息请填写完整",
          duration: 950
        });
      } else if (!/^1[3456789]\d{9}$/.test(this.data1[1].model)) {
        Toast({
          message: "手机号不合法",
          duration: 950
        });
      } else {
        let params = {
          name: this.data1[0].model,
          number: this.data1[1].model,
          address: this.areaString.split(","),
          detail: this.data2[0].model
        };
        window.localStorage.setItem("UserAddress", JSON.stringify(params));
        window.localStorage.setItem("isOpenLayer", true);
        // 调用添加地址
        this.fnHandleAddress(params);
        //this.$router.go(-1)
      }
    },

    fnHandleAddress(params) {
      var ethelWxUserInfo = this.getlocalStorage(this.companyUnique);
      if (this.editAddress) {
        // 修改地址
        api
          .takeaddressEdit({
            id: this.editAddress.seqid,
            name: params.name,
            phone: params.number,
            province: params.address[0],
            city: params.address[1],
            quxian: params.address[2],
            address: params.detail,
            isdefault: this.isdefault ? 1 : "0",
            username: ethelWxUserInfo.username
          })
          .catch(result => {
            console.log(result);
            if (result.status == 200) {
              Toast({
                message: "修改成功",
                duration: 950
              });
              this.$router.go(-1);
            }
          });
        return;
      }
      // 添加地址
      api
        .takeaddressAdd({
         
          name: params.name,
          phone: params.number,
          province: params.address[0],
          city: params.address[1],
          quxian: params.address[2],
          address: params.detail,
          isdefault: this.isdefault ? 1 : "0",
          username: ethelWxUserInfo.username
        })
        .catch(result => {
          console.log(result);
          if (result.status == 200) {
            Toast({
              message: "添加成功",
              duration: 950
            });
            this.$router.go(-1);
          }
        });
    },

    handlerArea() {
      this.areaVisible = true;
    },
    onValuesChange(picker, values) {
      let one = values[0];
      let two = values[1];
      let three = values[2];
      console.log(values);
      index = province.indexOf(one);
      if (index >= 0 && province.length > 0) {
        city = data[index].children.map(res => {
          return res.name;
        });
        picker.setSlotValues(1, city);
        two = values[1];
      }

      index2 = city.indexOf(two);
      if (index2 >= 0 && city.length > 0) {
        area = data[index].children[index2].children.map(res => {
          return res.name;
        });
        picker.setSlotValues(2, area);
        three = values[2];
      }
      if (this.editState && this.editAddress) {
        this.areaString =
          this.editAddress.province +
          "," +
          this.editAddress.city +
          "," +
          this.editAddress.quxian;
      } else {
        this.areaString = values.join(",");
      }
      this.editState = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
.mint-cell-value {
  color: #333;
}

.header {
  width: 100%;
  height: 1.45rem;
  background: white;
  position: fixed;
  top: 0;
  z-index: 1;

  .header-left {
    width: 10%;
    height: 100%;
    float: left;

    i {
      font-size: 0.6rem;
      line-height: 1.45rem;
      text-align: center;
      display: block;
    }
  }

  .header-in {
    width: 80%;
    float: left;
    text-align: center;
    font-size: 0.45rem;
    line-height: 1.45rem;
  }

  .header-rigth {
    width: 10%;
    height: 100%;
    float: left;
  }
}

.address {
  padding-top: 1.45rem;
  border-top: 1px solid #ddd;

  .address-box {
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    background: #fff;

    label {
      width: 30%;
      height: 100%;
      padding-left: 0.58rem;
      font-size: 0.4rem;
      display: block;
      float: left;
    }

    input {
      width: 70%;
      font-size: 0.4rem;
    }
  }
}

.footer {
  display: block;
  width: 100%;
  border-radius: 0.75rem;
  position: absolute;
  bottom: 0;
  height: 1.3rem;
}

.isdefault {
  padding-top: 0.3rem;
}

.area-class {
  width: 100%;
  height: 50%;
}

.picker-items {
  text-align: center;
}
</style>
<style lang="stylus">
.add_address {
  .mint-cell-wrapper, .mint-cell:last-child {
    background-image: -webkit-linear-gradient(top, #eee, #eee 50%, transparent 50%);
    background-image: linear-gradient(180deg, #eee, #eee 50%, transparent 50%);
  }

  .mint-cell {
    min-height: 1.5rem;
    border-bottom: 1px solid #eee;
  }

  .mint-cell-text {
    padding-left: 0.36rem;
    font-size: 0.4rem;
  }
}
</style>
